<template>
  <div class="follow-wrap">
    <div class="follow-item">
      <div class="follow-photo fl">
        <div>
          <img src="/default-photo.jpg"/>
        </div>
      </div>
      <div class="follow-info fl">
        <div class="follow-title">
          <div>酒仙桥14号健身</div>
          <div class="fr">关注</div>
        </div>
        <div class="follow-info">
         宣言：我们的家族就是那么掉
        </div>
      </div>
      <div class="cf"></div>
    </div>




    <div class="follow-item">
      <div class="follow-photo fl">
        <div>
          <img src="/default-photo.jpg"/>
        </div>
      </div>
      <div class="follow-info fl">
        <div class="follow-title">
          <div>酒仙桥14号健身</div>
          <div class="fr">关注</div>
        </div>
        <div class="follow-info">
          宣言：我们的家族就是那么掉
        </div>
      </div>
      <div class="cf"></div>
    </div>

    <div class="follow-item">
      <div class="follow-photo fl">
        <div>
          <img src="/default-photo.jpg"/>
        </div>
      </div>
      <div class="follow-info fl">
        <div class="follow-title">
          <div>酒仙桥14号健身</div>
          <div class="fr">关注</div>
        </div>
        <div class="follow-info">
          宣言：我们的家族就是那么掉
        </div>
      </div>
      <div class="cf"></div>
    </div>

    <div class="follow-item">
      <div class="follow-photo fl">
        <div>
          <img src="/default-photo.jpg"/>
        </div>
      </div>
      <div class="follow-info fl">
        <div class="follow-title">
          <div>酒仙桥14号健身</div>
          <div class="fr">关注</div>
        </div>
        <div class="follow-info">
          宣言：我们的家族就是那么掉
        </div>
      </div>
      <div class="cf"></div>
    </div>

  </div>
</template>
<script>
  export default {
    layout: 'home',
    data () {
      return {
      }
    },
    components: {
    },
    methods: {}
  }
</script>

<style>
  .follow-item{
    border-bottom: 1px solid #ececec;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .follow-wrap{
    width: 98%;
    padding:1% ;
  }
  .follow-info{
    word-break:break-all;
    width:  90%;
    font-size: 1.05em;
  }
  .follow-photo{
    width: 10%;
  }
  .follow-photo img{
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
  .follow-photo>div{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    overflow: hidden;
  }
  .follow-photo>div img{
    cursor: pointer;
    transition: all 0.6s;
  }
  .follow-photo> div img:hover{
    transform: scale(1.4);
  }
  .follow-title{
    height: 30px;
    line-height: 30px;
    font-size: 1.1em;
  }
  .follow-title>div:nth-child(1){
    color: #13BA31;
    font-weight: 600;
    margin-left:10px ;
  }
  .follow-title>div:nth-child(2){
    border:1px solid  #13BA31;
    border-radius: 5px;
    height: 23px;
    line-height: 23px;
    width: 65px;
    text-align: center;
    font-size: 0.75em;
    margin-right: 10px;
  }
  .follow-title>div{
    display: inline-block;
  }
</style>
